<template>
	<view>
		<h-dark :title="t('mall.title')"></h-dark>
		<view class="bg-[#4E55AF] p-[30rpx] pt-[10rpx]">
			<view class="">
				<view class="flex justify-start items-center">
					<view class="mr-[15rpx]">
						{{t('mall.userPoint')}}
					</view>
					<u-icon size="42" name="/static/images/mall/point.png"></u-icon>
					<view class="ml-[6rpx] text-white font-bold text-2xl">
						{{data.user.point}}
					</view>
				</view>
			</view>
		</view>
		
		<view class="flex justify-between mx-[30rpx] mt-[50rpx]  mb-[50rpx]">
			<view class="w-1/3" @click="jumpTo('/pages/signin/index')">
				<view class="text-center mb-[10rpx]">
					<u-icon size="88" name="/static/images/mall/signin.png"></u-icon>
				</view>
				<view class="text-center">
					{{t('mall.navSignin')}}
				</view>
			</view>
			<view class="w-1/3" @click="jumpTo('/pages/mall/draw')">
				<view class="text-center mb-[10rpx]">
					<u-icon size="88" name="/static/images/mall/draw.png"></u-icon>
				</view>
				<view class="text-center">
					{{t('mall.navDraw')}}
				</view>
			</view>
			<view class="w-1/3" @click="jumpTo('/pages/mall/record')">
				<view class="text-center mb-[10rpx]">
					<u-icon size="88" name="/static/images/mall/record.png"></u-icon>
				</view>
				<view class="text-center">
					{{t('mall.navRecord')}}
				</view>
			</view>
		</view>
		<view class="mx-[30rpx] pb-[30rpx]">
			<view class="mb-[20rpx] font-bold">
				{{t('mall.goodsTips')}}
			</view>
			<view class="">
				<view class="bg-[#2C326B] rounded-lg mb-[20rpx] p-[30rpx]" v-for="item in data.lists" :key="item.id">
					<view class="flex justify-start items-center">
						<view class="mr-[20rpx]">
							<u-image width="120rpx" mode="widthFix" :src="item.image" alt="" />
						</view>
						<view class="w-full">
							<view class="mb-[10rpx] font-bold">
								{{item.title}}
							</view>
							<view class="flex justify-between items-center">
								<view class="">
									<view class="mb-[20rpx]">
										<text>{{t('mall.remNum')}}</text>
										<text class="mr-[10rpx]">:</text>
										<text>{{item.num}}</text>
									</view>
									<view class="flex justify-start items-center">
										<u-icon size="42" name="/static/images/mall/point.png"></u-icon>
										<view class="ml-[6rpx]">
											{{item.price}}
										</view>
									</view>
								</view>

								<view class="">
									<u-button type="primary" size="mini" shape="circle"
										@click="handleBuy(item)">{{t('mall.buyBtn')}}</u-button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-keyboard class="max-w-[750px]" ref="uKeyboard1" mode="number" :dot-enabled="false" :tips="t('pwd.payPwd')"
			confirm-text="" cancel-text="" v-model="show_keyboard" @change="keyboardChange" @backspace="backspace"
			:show-input-val="true" :input-value="formData.pay_pwd"></u-keyboard>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, ref } from 'vue'
	import { getIndex, buy } from '@/api/mall'

	import { t, jumpTo } from '@/utils/util'

	uni.setNavigationBarTitle({ title: t('mall.title') })

	const show_keyboard = ref(false)
	const data = reactive({
		user: {
			point: 0
		},
		lists: []
	})

	const formData = reactive({
		id: 0,
		pay_pwd: '',
		buy: 1//验证器标识
	})

	const handleBuy = async (item : any) => {
		if (item.price - data.user.point > 0) return uni.$u.toast(t('mall.insPoint'))

		if (item.num <= 0) return uni.$u.toast(t('mall.insNum'))

		formData.id = item.id

		formData.pay_pwd = '';
		show_keyboard.value = true;
	}

	const submit = async () => {
		await buy(formData)
		getData()
		return uni.$u.toast(t('mall.buySuccess'))
	}

	const keyboardChange = (val : string) => {
		formData.pay_pwd += val;
		if (formData.pay_pwd.length == 6) {
			show_keyboard.value = false;
			submit();
		}
	}
	const backspace = () => {
		// 删除value的最后一个字符
		if (formData.pay_pwd.length) formData.pay_pwd = (formData.pay_pwd).substr(0, (formData.pay_pwd.length) - 1);
	}

	const getData = async () => {
		const res = await getIndex()
		if (res.need_set_pwd == 1) {
			uni.$u.toast(t('pwd.pwdSetFirstTips'))
			uni.redirectTo({
				url: '/pages/change_password/set_password_pay'
			})
			return
		}
		data.lists = res.lists
		data.user = res.user
	}

	getData()
</script>

<style lang="scss">
	.top-bg {
		background-image: url('/static/images/mall/index-bg.png');
		background-size: 100% auto;
		background-repeat: no-repeat;
		background-position: center;
		height: 100px;
	}
</style>